<template>
  <div class="volunteer">
    <div class="centre">
      <div class="volunteer_top">
        <router-link to="/Intelligence" tag="div">
          <h4>
            <i class="iconfont">&#xe655;</i>
          </h4>

          <span>智能填报</span>
        </router-link>
        <router-link to="/School" tag="div">
          <h4>
            <i class="iconfont">&#xe63a;</i>
          </h4>

          <span>院校优先</span>
        </router-link>
        <router-link to="/Major" tag="div">
          <h4>
            <i class="iconfont">&#xe60f;</i>
          </h4>

          <span>专业优先</span>
        </router-link>
        <router-link to="/Manual" tag="div">
          <h4>
            <i class="iconfont">&#xe78d;</i>
          </h4>

          <span>手动填报</span>
        </router-link>
      </div>
<<<<<<< HEAD

      <transition name="fade">
        <keep-alive>
          <router-view></router-view>
        </keep-alive>
      </transition>
=======
      
       <transition name="fade">
              <keep-alive>
                <router-view></router-view>
              </keep-alive>
            </transition>
>>>>>>> 314b442cce11d658746227581b0160373004c345
    </div>
  </div>
</template>

<script>
export default {
  name: "Volunteer"
};
</script>
<<<<<<< HEAD

<style lang="scss" >
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter,
.fade-leave-to {
  opacity: 0;
}
=======
<style lang="scss">

.fade-enter-active, .fade-leave-active {
      transition: opacity .5s;
    }
    .fade-enter, .fade-leave-to  {
      opacity: 0;
    }
>>>>>>> 314b442cce11d658746227581b0160373004c345
.volunteer {
  background: #f6f6f6;
  padding-bottom: 116px;
  position: relative;
  z-index: 20;
  .volunteer_top {
    padding: 60px 0;
    display: flex;
    justify-content: space-around;
    div {
<<<<<<< HEAD
      cursor: pointer;
=======
            cursor: pointer;
>>>>>>> 314b442cce11d658746227581b0160373004c345
      position: relative;
      z-index: 20;
      padding: 24px 32px;
      background: #f0f0f0;
      border-radius: 4px;
      color: #959595;
      h4 {
        display: inline-block;
        background: #ffffff;
        height: 32px;
        width: 32px;
        border-radius: 50%;
        text-align: center;
        line-height: 32px;
        margin-right: 12px;
      }
      .iconfont {
        color: #2e86ff;
      }
    }
<<<<<<< HEAD

    .router-link-exact-active {
      background: #2e86ff;
      span {
        color: #fff;
      }
    }
  }
=======
    
       .router-link-exact-active{
      background: #2e86ff;
      span{
          color: #fff;
      }
  }
  }
 
>>>>>>> 314b442cce11d658746227581b0160373004c345
}
</style>